<!-- echartscom.vue -->
<template>
    <div class="pie">
        <div style="height: 300px;" :id="id" class="echarts" ref="echarts"> </div>
</div>
</template>
       
<script>
import * as echarts from 'echarts';

export default {
    name: 'echartscom',
    // id --> 为了多图渲染
    // title --> 标题
    // chartData --> value数组
    // nameData --> name数组
    props: ['id', 'title', 'chartData', 'nameData'],
    data() {
        return {
            arr: []
        };
    },
    methods: {
        drawCharts() {
            var myChart = echarts.init(document.getElementById(this.id));
            myChart.setOption({
                title: {
                    text: this.title,
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: this.nameData
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%','70%'],
                        center: ['50%', '40%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        labelLine: {
                            show: true, //数据标签引导线
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            normal: {
                                // 设置引导线
                                show: true
                                // length: 18
                            }
                        },
                        data: this.arr
                    }
                ]
            });

        },
        initData() {
            this.nameData.forEach((val, i) => {
                // 列数据
                this.chartData.forEach((item, index) => {
                    if (i == index) {
                        this.arr.push({
                            value: item,
                            name: val
                        });
                    }
                });
            });
        }
    },
    watch: {
        chartData: {
            // 在父组件数据发生改变后子组件要做到实时更新,就需要子组件用watch来监听数据的变化
            // 看情况是否需要newValue和oldValue之间值比较
            handler(newValue, oldValue) {
                this.arr.length = 0;
                this.initData();
                this.drawCharts();
            },
            deep: true
        }
    },
    computed: {
        echarts() {
            return 'echarts' + Math.random() * 100000;
        }
    },
    mounted() {
        this.drawCharts();
    },
    beforeMount() { },
    beforeCreate() {
    },
    created() {
        this.initData();
    },
    components: {}
};
</script>
      
<style scope></style>
    
